<template>
  <div>
    <el-dialog width="1100px" :title="$t('广告素材')" :close-on-click-modal="false" :visible.sync="isShow">
      <div class="head_search u-f u-f-ac u-fw">
        <div class="ipt_box u-f u-f-ac u-f-jsb">
          <p class="label font14 text_black">{{$t('名称')}}：</p>
          <el-input v-model="name" :placeholder="$t('请输入素材名称')"></el-input>
        </div>
        <div class="select_box u-f u-f-ac u-f-jsb">
          <p class="label font14 text_black">{{$t('类型')}}：</p>
          <el-select
            v-model="clientVal"
            :placeholder="$t('请选择')"
            @change="clientChange"
          >
            <el-option
              v-for="item in clientArr"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div>
        <div class="div_box u-f u-f-ac">
        <p class="label font14 text_black">{{ $t("所属代理商") }}：</p>
        <div
          class="content font14 text_black u-f u-f-ac"
          @click="openAgentList"
        >
          <p class="text-ellipsis">{{ agent ? agent : $t("选择代理商") }}</p>
        </div>
        <button class="btn font14 text_white bg_danger" @click="clearAgent">
          {{ $t("清除") }}
        </button>
      </div>
        <button class="sub_btn font14 text_white bg_blue" @click="getData('search')">
          {{$t('提交')}}
        </button>
      </div>

      <div>
        <!--  -->
        <div class="list_box u-f u-fw">
          <div
            class="thumbnail"
            v-for="(item, index) in filelist"
            :key="index"
            @click="changeThumb(item, index)"
          >
            <img class="img" :src="item.file" v-if="item.type == 'image'" />
            <img class="img" :src="item.file + '_thumb.jpg'" v-if="item.type == 'video'" />
            <img
              class="icon"
              src="../../assets/img/ic_gou.png"
              v-show="item.complete"
            />
            <img
              class="icon_play"
              src="../../assets/img/ic_play.png"
              v-if="item.type == 'video'"
            />
            <div class="txt_box">
              <p class="txt font14 text_black">{{$t('名称')}}：{{ item.name }}</p>
              <p class="txt font14 text_black">
                {{$t('类型')}}：{{ item.type == "video" ? $t('视频') : $t('图片') }}
              </p>
              <p class="txt font14 text_black">{{$t('大小')}}：{{ item.size }}</p>
              <p class="txt font14 text_black" v-if="item.type == 'video'">
                {{$t('时长')}}：{{ item.duration }}
              </p>
            </div>
          </div>
        </div>

        <div class="pagination_box ">
          <el-pagination
            background
            
            @current-change="handleCurrentChange"
            :current-page="page"
            :page-size="page_size"
            layout="total, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>

      <div class="btn_box u-f u-f-ac u-f-je">
        <el-button type="primary" @click="submit">{{$t('确定')}}</el-button>
      </div>
    </el-dialog>

    <agent-list ref="agentList" @hide="closeAgentList"></agent-list>
  </div>
</template>

<script>
import util from '@/assets/js/util.js'
import agentList from "components/agent-list/agent-list.vue";
export default {
  name: "adverMaterial",
  data() {
    let that = this
    return {
      page: 1,
      page_size: 20,
      total: 0,
      isShow: false,
      name: "",
      clientVal: 0,
      clientArr: [
        {
          value: 0,
          label: that.$t('所有')
        },
        {
          value: 'image',
          label: that.$t('图片')
        },
        {
          value: 'video',
          label: that.$t('视频')
        },
      ],
      agent: '',
      aid: '',
      filelist: [],
      result: [],
    };
  },
  components: {
    agentList,
  },
  methods: {
    show() {
      this.name = ''
      this.clientVal = 0
      this.agent = "";
      this.aid = "";
      this.page = 1
      this.page_size = 20
      this.filelist = []
      this.isShow = true;
      this.result = []
      setTimeout(() => {
        this.getData();
      }, 150);
    },
    getData(type) {
      if(type == 'search') { this.page = 1 }
      util.$http('/screenAdv/materialList?page=' + this.page, {
        page_size: this.page_size,
        type: this.clientVal,
        name: this.name,
        agency_id: this.aid
      })
      .then(res=>{
        if(res.code == 1) {
          this.total = res.data.total
          for (let item of res.data.list) {
            item.complete = false;
          }
          this.filelist = res.data.list
        }
      })

    },
    openAgentList() {
      this.$refs.agentList.show();
    },
    closeAgentList(data) {
      this.agent = data.name;
      this.aid = data.id;
    },
    clearAgent() {
      this.agent = "";
      this.aid = "";
    },
    submit() {
      this.isShow = false;
      this.$emit("hide", this.result);
    },
    clientChange(val) {
      this.clientVal = val;
    },
    handleCurrentChange(val) {
      this.page = Number(val)
      this.getData();
    },
    changeThumb(item, index) {
      let ind = this.result.indexOf(item);
      item.complete = !item.complete
      this.$set(this.filelist, index, item)
      if (ind != -1) {
        this.result.splice(ind, 1);
      } else {
        this.result.push(item);
      }
    },
  },
};
</script>

<style scoped>
.head_search {
  margin-bottom: 20px;
}
.head_search .ipt_box {
  margin-right: 20px;
}
.head_search .ipt_box .el-input {
  width: 200px;
}
.head_search .select_box {
  margin-right: 20px;
}
.head_search .select_box .el-select {
  width: 200px;
}
.head_search .switch_box {
  margin-right: 20px;
}
.head_search .div_box {
  margin-right: 20px;
}
.head_search .div_box .content {
  width: 170px;
  height: 40px;
  padding-left: 15px;
  border: 1px solid #dcdfe6;
  border-radius: 4px 0 0 4px;
  transition: border 0.3s;
  box-sizing: border-box;
}
.head_search .div_box .content:active {
  border-color: #409eff;
}
.head_search .div_box .btn {
  width: 60px;
  height: 40px;
  border: 0;
  outline: 0;
  cursor: pointer;
  border-radius: 0 4px 4px 0;
  box-sizing: border-box;
}
.head_search .sub_btn {
  width: 70px;
  height: 40px;
  border: 0;
  outline: 0;
  cursor: pointer;
  border-radius: 4px;
}
.pagination_box {
  padding-top: 30px;
}
.pagination_box .el-pagination {
  display: flex;
  justify-content: flex-end;
}
.list_box .thumbnail {
  position: relative;
  width: 240px;
  padding: 4px;
  border: 1px solid #ddd;
  cursor: pointer;
  border-radius: 4px;
  box-sizing: border-box;
  margin-right: 33px;
  margin-bottom: 20px;
}
.list_box .thumbnail:nth-of-type(4n) {
  margin-right: 0;
}
.list_box .thumbnail .icon {
  position: absolute;
  right: 0;
  top: 0;
  width: 32px;
  height: 32px;
}
.list_box .thumbnail .icon_play {
  position: absolute;
  right: 96px;
  top: 98px;
  width: 50px;
  height: 50px;
}
.list_box .thumbnail .img {
  width: 230px;
  height: 240px;
}
.list_box .thumbnail .txt_box {
  padding: 9px;
}
.list_box .thumbnail .txt {
  margin: 0 0 5px 0;
}
.btn_box {
  margin-top: 40px;
}
</style>
